<%@page pageEncoding="UTF-8" %>
<%@ include file="../include/header.jsp" %>
<!-- banner -->
<body>
<div id="app" v-cloak>

    <!--条件查询 -->
    <div class="toolbar2">
        <el-form :inline="true" :model="filters" label-position="top" size="small">
            <div style="justify-content: space-between;display: flex;align-items: center">
                <div style="margin-left: 16px;position: relative;">
                    <el-form-item label="关键词">
                        <el-input v-model="filters.searchStr" placeholder="请输入关键词" clearable></el-input>
                    </el-form-item>
                    <el-form-item label=" ">
                        <el-button type="primary" @click="loadData" class="sbtn">查询</el-button>
                    </el-form-item>
                </div>
                <el-form-item label=" " style="margin-right: 25px;">
                    <el-button type="primary" @click="handleAdd" class="sbtn">新增</el-button>
                </el-form-item>
            </div>
        </el-form>
    </div>

    <div style="position: relative">
        <el-table :data="tableData" border stripe v-loading="loading" :height="tableH" ref="table">
            <el-table-column prop="licenseImage" label="banner图片" min-width="150">
                <template slot-scope="scope">
                    <img :src="'${imgesBaseUrl}/'+scope.row.bannerUrl" alt="" style="height: 50px">
                </template>
            </el-table-column>
            <el-table-column prop="title" label="标题" min-width="150">
            </el-table-column>
            <el-table-column prop="createTime" label="日期" min-width="100" :formatter="dateFormat"></el-table-column>
            <el-table-column label="操作" width="250">
                <template scope="scope">
                    <el-button type="" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>


    <div style="position: absolute;right: 8px;margin: 5px 0 5px 0;">
        <el-pagination v-if="isMobile == 'true'" :current-page="page" :page-size="size" :pager-count="2" :total="total"
                       :page-sizes="[10,20,50,100]" @size-change="sizeChange" @current-change="handleCurrentChange"
                       layout="total, prev, pager, next"></el-pagination>
        <el-pagination v-else :current-page="page" :page-size="size" :total="total" :page-sizes="[10,20,50,100]"
                       @size-change="sizeChange" @current-change="handleCurrentChange"
                       layout="total, sizes, prev, pager, next, jumper"></el-pagination>
    </div>

    <!--编辑界面-->
    <el-dialog title="编辑" :visible.sync="editFormVisible" :close-on-click-modal="false" @open="handleOpen"
               @close="handleClose" width="800px">
        <el-form :model="editForm" label-width="120px" :rules="editFormRules" ref="editForm" :inline="false">
            <el-form-item label="标题" prop="title">
                <el-input v-model.trim="editForm.title" auto-complete="off" style="width: 320px;"></el-input>
            </el-form-item>
            <el-form-item label="banner图片" prop="coverUrl">
                <el-upload class="avatar-uploader" action="${ctx}/backstage/file/imgUpload?saveType=banner"
                           :show-file-list="false"
                           :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <img v-if="editForm.bannerUrl" :src="'${imgesBaseUrl}/'+ editForm.bannerUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="handleSave" :loading="editLoading">提交</el-button>
        </div>
    </el-dialog>
</div>
</body>
<script>
    $(window).resize(function () {
        app.tableH = $(window).height() - 155;
    });

    var app = new Vue({
        el: '#app',
        data: {
            isMobile: '${isMobile}',
            tableH: $(window).height() - 155,
            loading: false,
            page: 1,
            size: 10,
            total: 0,
            vkOptions: {
                width: '95%',
                height: '300px',
                items: [
                    'source', '|', 'undo', 'redo', '|', 'preview', 'cut', 'copy', 'paste',
                    'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
                    'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
                    'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
                    'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
                    'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
                    'flash', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
                    'anchor', 'link', 'unlink'
                ]
            },
            filters: {
                searchStr: ''
            },
            editFormVisible: false,
            editLoading: false,
            editFormRules: {
                title: [{
                    required: true,
                    message: '不能为空！'
                }],
                content: [{
                    required: true,
                    message: '不能为空！'
                }],
                publishTime: [{
                    required: true,
                    message: '不能为空！'
                }]
            },
            editForm: {},
            tableData: []
        },
        created: function () {
            this.loadData();
        },
        methods: {
            loadData: function () {
                this.loading = true;
                var data = Object.assign({}, this.filters);
                data.page = this.page;
                data.size = this.size;
                $.ajax({
                    url: "${ctx}/backstage/banner/query",
                    data: data,
                    dataType: 'json',
                    success: function (returndata) {
                        if (returndata.success) {
                            app.total = returndata.data.count;
                            app.tableData = returndata.data.list;
                        } else {
                            app.total = 0;
                            app.tableData = [];
                            app.$notify.error({
                                title: '错误',
                                message: returndata.errors.message
                            });
                        }
                        app.loading = false;
                    }
                });
            },
            handleSearch: function () {
                this.loadData();
            },
            sizeChange: function (val) {
                this.size = val;
                this.loadData();
            },
            handleCurrentChange: function (val) {
                this.page = val;
                this.loadData();
            },
            handleClose: function () {
                this.editLoading = false;
            },
            handleOpen: function () {
                if (this.$refs.editForm) {
                    this.$refs.editForm.resetFields();
                }
            },
            handleAdd: function () {
                this.editForm = {
                    bannerUrl: null
                };
                this.editFormVisible = true;
            },
            handleEdit: function (index, row) {
                this.editForm = Object.assign({
                    coverUrl: null
                }, row);
                this.editFormVisible = true;
            },
            handleSave: function () {
                this.$refs['editForm'].validate(function (value) {
                    if (value) {
                        app.editLoading = true;
                        $.ajax({
                            type: 'POST',
                            url: "${ctx}/backstage/banner/edit",
                            data: app.editForm,
                            dataType: 'json',
                            success: function (returndata) {
                                if (returndata.success) {
                                    app.loadData();
                                    app.$message({
                                        message: '提交成功!',
                                        type: 'success'
                                    });
                                    app.editFormVisible = false;
                                } else {
                                    app.$message({
                                        message: returndata.errors.message,
                                        type: 'error'
                                    });
                                }
                                app.editLoading = false;
                            }
                        });
                    }
                });
            },
            handleDelete: function (index, row) {
                this.$confirm('确认删除该记录吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    app.editLoading = true;
                    $.ajax({
                        url: "${ctx}/backstage/banner/delete",
                        data: {
                            id: row.id
                        },
                        dataType: 'json',
                        success: function (returndata) {
                            if (returndata.success) {
                                app.loadData();
                                app.$message({
                                    message: '删除成功!',
                                    type: 'success'
                                });
                            } else {
                                app.$notify.error({
                                    title: '错误',
                                    message: returndata.errors.message
                                });
                            }
                            app.editLoading = false;
                        }
                    });
                });
            },
            dateFormat: function (row, column) {
                var date = row[column.property];
                if (date == undefined) {
                    return "";
                }
                if (date.length < 10) {
                    var date = new Date(date * 1000); //如果date为10位不需要乘1000
                } else {
                    var date = new Date(date);
                }
                var Y = date.getFullYear() + '-';
                var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
                var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
                var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
                var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
                return Y + M + D;
            },
            preview: function (row) {
                this.centerDialogVisible = true;
            },
            beforeAvatarUpload: function (file) {
                const isJPG = file.type === 'image/jpeg';
                const isGIF = file.type === 'image/gif';
                const isPNG = file.type === 'image/png';
                const isBMP = file.type === 'image/bmp';
                const isLt5M = file.size / 1024 / 1024 < 5;
                //判断图片格式
                if (!isJPG && !isGIF && !isPNG && !isBMP) {
                    this.$message({
                        showClose: true,
                        message: '上传图片必须是JPG/GIF/PNG/BMP 格式!',
                        type: 'error'
                    });
                }
                //判断图片格式大小
                if (!isLt5M) {
                    this.$message({
                        showClose: true,
                        message: '上传图片大小不能超过 5MB!',
                        type: 'error'
                    });
                }
                return (isJPG || isBMP || isGIF || isPNG);
            },
            //图片上传成功调用函数，文件上传成功时的钩子
            handleAvatarSuccess: function (res, file, fileList) {
                if (res.success) {
                    app.editForm.bannerUrl = res.url;
                } else {
                    app.$notify.error({
                        title: '错误',
                        message: res.errors.message
                    });
                }
            }
        }
    });
</script>
